<!DOCTYPE html><html><head><title>08-第八章  float 浮动</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="08-第八章-float-浮动">08-第八章  float 浮动</h1>

<p></p>

<hr>



<h2 id="一-float浮动">一、 float浮动</h2>

<blockquote>
  <p>浮动的定义：使元素脱离文档流，按照指定（<code>左右</code>）方向发生移动，遇到父级<a href="http://www" target="_blank">边界</a>或者<a href="http://ww" target="_blank">相邻的浮动元素</a>停了下来。 <br>
  文档流:是文档中可显示对象在排列时所占用的位置/空间(在页面中占位置)。 <br>
  脱离文档流：<a href="http://www" target="_blank">在页面中不占位置</a></p>
</blockquote>



<h4 id="一-浮动的一般情况">一 浮动的一般情况</h4>

<blockquote>
  <p>float:left     左浮动  <br>
  float:right     右浮动</p>
</blockquote>



<h4 id="二-浮动的特殊情况">二、 浮动的特殊情况</h4>

<blockquote>
  <p>1、如果只给前面的盒子浮动，后面的元素会占据它的位置 <br>
  2、给了浮动的元素，只会影响后面的元素； <br>
  3、如果父级宽度太窄，无法容纳所有的浮动元素，无法容纳的浮动元素会往下掉 <br>
  4、如果浮动元素的高度不同，父级宽度太窄，那么当它们往下掉时可能被其它浮动元素’<a href="http://www" target="_blank">卡住</a>’</p>
</blockquote>



<h4 id="三float浮动后的元素特征">三、float浮动后的元素特征</h4>

<blockquote>
  <p>1、块级 （横排显示） <br>
      2、内联 支持宽高 <br>
      3、默认内容撑开宽度 <br>
      4、支持margin <br>
          5、脱离文档流 <br>
      6、提升层级半层 </p>
</blockquote>

<p>问题： 不支持margin:<code>auto</code>;</p>



<p><img longdesc="./1515227079402.png" alt="Alt text" title="" type="image/png" class="" src=""></p>

<hr>

<p>Inline-block的特征</p>

<blockquote>
  <p>1、块级可以（横排展示）   ——友好 <br>
  2、内联 标签支持宽高 <br>
  3、默认 内容撑开宽度 <br>
  4、支持margin</p>
</blockquote>

<p>问题： <br>
1、标签间空格 被解析 <br>
2、不支持margin:auto;</p>

<hr>



<h2 id="二-清除浮动">二、 清除浮动</h2>



<h4 id="1float浮动问题">1、float浮动问题</h4>

<blockquote>
  <p>元素浮动后会造成<a href="http://wwww" target="_blank">元素父级高度塌陷</a></p>
</blockquote>



<h4 id="2clear属性">2、clear属性</h4>

<p>clear:属性规定元素的某侧不允许浮动元素</p>

<blockquote>
  <ul><li>left  -清除左浮动</li>
  <li>right  -清除右浮动</li>
  <li>both  -清除左右浮动</li>
  </ul>
</blockquote>



<h2 id="二浮动具体清除办法">二、浮动具体清除办法</h2>



<h4 id="1子级办法在父级尾部添加空标签并添加clear属性">1、子级办法:在父级尾部添加空标签，并添加clear属性</h4>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs delphi"><div class="hljs-line"><span class="hljs-comment line-number">1.</span>&lt;<span class="hljs-keyword">div</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">'clear'</span>&gt;&lt;<span class="hljs-keyword">div</span>&gt;
</div></code></pre>



<h4 id="2父级办法">2、父级办法</h4>

<blockquote>
  <p>a、加高                   问题：扩展性不好 <br>
  b、inline-block 清浮动方法：       问题：margin:auto失效； <br>
  c、overflow:auto 清浮动方法；  问题：IE6需要配合宽度 <br>
  d,   after 伪元素清除：元素内部末尾添加内容 ( <a href="http://www" target="_blank">主流办法</a>) 并添加clear属性</p>
</blockquote>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs css"><div class="hljs-line"><span class="hljs-comment line-number">1.</span><span class="hljs-selector-tag">element</span><span class="hljs-selector-pseudo">:after</span>{<span class="hljs-attribute">content</span>:<span class="hljs-string">''</span>;<span class="hljs-attribute">display</span>:block;<span class="hljs-attribute">clear</span>:both;}
</div></code></pre></div></body></html>